<!-- @format -->

<template>
    <div>
        <slot name="title">默认插槽</slot>
        <!-- 默认插槽只能有一个，不然内容会出现两次 -->
        <div class="default-slot">
            <slot>默认插槽...</slot>
        </div>
        <slot name="content" :list="list"> content... </slot>
        <!-- 默认插槽只能有一个，不然内容会出现两次 -->
        <p>默认插槽出现两次： <slot>默认插槽...</slot></p>
    </div>
</template>

<script setup lang="ts">
import {reactive} from 'vue';

const list = reactive([
    {
        name: '小娃',
    },
    {
        name: '空空',
    },
]);
</script>

<style scoped lang="scss">
.default-slot {
    color: orange;
}
</style>
